<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生查询</title>
    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>

    <style>
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
        }

    </style>


</head>
<body>


<div style="text-align: center">
    <h2>
        学生列表
        <!--        <a href="InsertStudent" class="layui-btn layui-btn-xs layui-bg-cyan">-->
        <!--            <i class="layui-icon">&#xe608;</i>-->
        <!--            添加-->
        <!--        </a>-->

        <a href="/studentLayer" class="layui-btn layui-btn-radius layui-btn-xs">
            菜单
            <i class="layui-icon">&#xe614;</i>
        </a>

        <br/><br/>

        <form class="layui-form" action="Select_Student_Course" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label" style="padding:5px;text-align: right;">科目</label>
                <div class="layui-input-inline">
                    <select name="c_t_name" lay-search>
                    </select>
                </div>

                <label class="layui-form-label" style="width: auto; padding:5px;text-align: right;">学生名字</label>
                <div class="layui-input-inline">
                    <select name="name" lay-search>
                    </select>
                </div>

                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-sm" type="button" data-type="reload" onclick="select();">立即提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                </div>
            </div>
        </form>


    </h2>

    <table id="table" lay-filter="table" class="layui-table" style="width:auto;height:auto;">
        <!--    <colgroup></colgroup>-->
        <!--    <tr>-->
        <!--        <th>学生姓名</th>-->
        <!--        <th>学生密码</th>-->
        <!--        <th>学生性别</th>-->
        <!--        <th>学生年龄</th>-->
        <!--        <th>学生科目</th>-->
        <!--        <th>学生班级</th>-->
        <!--        <th>时间</th>-->
        <!--        <th>操作</th>-->
        <!--    </tr>-->

        <!--    <tbody id="selectStudent">-->
        <!--    </tbody>-->

    </table>


</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="add">添加班级</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    {{#     if(d.status==1){     }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#    }else{ }}
    <a class="layui-btn layui-btn-xs layui-btn-disabled" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" >删除</a>
    {{# } }}

</script>

<script type="text/html" id="SEXtemplet">
    {{#   if(d.sex == '男'){       }}
    <span style="color: #ff0000"> {{d.sex}} </span>
    {{# } else if(d.sex == '女'){  }}
    <span style="color: #ff99cc"> {{d.sex}} </span>
    {{# } }}

</script>

<script type="text/html" id="StatusTemplet">

    {{# if(d.status == 1){     }}
    <input type="checkbox" id="{{d.id}}" name="status" value="{{d.status}}" lay-filter="status"
           lay-skin="switch" lay-text="开启|冻结" checked>
    {{# }else{    }}
    <input type="checkbox" id="{{d.id}}" name="status" value="{{d.status}}" lay-filter="status"
           lay-skin="switch" lay-text="开启|冻结">
    {{# } }}

</script>


<script type="text/javascript">



    function student_name(form) {
        $.ajax({
            dataType: "json",
            url: "/studentLayer/Student/student_name",
            method: "POST",
            success: function (ajax) {
                var html = "<option></option>";
                if (ajax.code == 0) {
                    ajax.data.forEach(function (value, index) {
                        html = html
                            + "<option value='" + value.id + "'>"
                            + value.name
                            + "</option>";
                    })
                    //console.log(html);
                    $("select[name=name]").html(html);
                    form.render("select");
                } else {
                    alert("垃圾");

                }
            }
        })
    }

    function course(form) {
        $.ajax({
            dataType: "json",
            url: "/studentLayer/Student/course",
            method: "POST",
            success: function (ajax) {
                var html = "<option></option>";
                if (ajax.code == 0) {
                    ajax.data.forEach(function (value, index) {
                        html = html
                            + "<option value='" + value.id + "'>" + value.name + "</option>"
                    })
                    $("select[name=c_t_name]").html(html);
                    form.render("select");
                } else {
                    alert("垃圾");
                }
            }
        })
    }


    $(function () {
        layui.use(['table', 'form', 'layer'], function () {
            window.table = layui.table;
            window.form = layui.form;
            var layer = layui.layer;

            student_name(window.form);
            course(window.form);

            window.table.render({
                elem: '#table',
                id: 'table',
                url: '/studentLayer/Student/SelectStudent',
                page: true,
                toolbar: '#toolbarDemo',
                cols: [[
                    {field: 'id', title: 'ID', sort: true, align: 'center'},
                    {field: 'name', title: '学生名字', align: 'center'},
                    {field: 'password', title: '学生密码', align: 'center'},
                    {field: 'sex', title: '学生性别', align: 'center', templet: '#SEXtemplet', sort: true},
                    {field: 'age', title: '学生年龄', sort: true, align: 'center'},
                    {field: 'c_t_name', title: '学生科目', align: 'center'},
                    {field: 'cls_name', title: '学生班级', align: 'center'},
                    {field: 'create_time', title: '时间', align: 'center'},
                    {field: 'id', title: '操作', toolbar: '#barDemo', align: 'center'},
                    {field: 'status', title: '状态', toolbar: '#StatusTemplet', align: 'center'},
                    {type: 'checkbox', width: '60', fixed: 'right'}
                ]]
            });


            window.form.on('switch(status)', function (obj) {
                var id = obj.elem.id;
                var status = obj.elem.value;

                if (obj.elem.checked == true) {
                    status = 1;
                    // console.log(id,status);

                    $.ajax({
                        dataType: 'json',
                        type: 'POST',
                        url: '/studentLayer/Student/UpStatusStudent',
                        data: {
                            "id": id,
                            "status": status
                        },
                        success: function (ajax) {
                            layer.tips('已开启', obj.othis);
                            window.table.reload('table');

                        }
                    })

                } else {
                    status = 0;
                    // console.log(id,status);
                    $.ajax({
                        dataType: 'json',
                        type: 'POST',
                        url: '/studentLayer/Student/UpStatusStudent',
                        data: {
                            "id": id,
                            "status": status
                        },
                        success: function (ajax) {
                            layer.tips('已关闭',obj.othis);
                            window.table.reload('table');

                        }
                    })


                }


            });


           window.table.on('toolbar(table)', function (obj) {
                    var checkStatus = table.checkStatus('table');
                    var layEvent = obj.event;
                    switch (layEvent) {
                        case'add':
                            layer.open({
                                type: 2,
                                title: '添加',
                                area: ['100%', '100%'],
                                maxmin: true,
                                content: '/studentLayer/Student/InsertStudent'
                            })
                            break;
                        case'getCheckData':
                            layer.msg(JSON.stringify(checkStatus.data));
                            break;
                        case'getCheckLength':
                            layer.msg(checkStatus.data.length + '条');
                            break;
                        case'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选');
                            break;
                    }
                }
            );


            window.table.on('tool(table)', function (obj) {
                var layEvent = obj.event;
                var tr = obj.tr;
                var data = obj.data;


                if (layEvent == 'edit') {

                    layer.msg('是否修改', {
                        btn: ['是', '否'],
                        yes: function (index, layero) {
                            layer.open({
                                type: 2,
                                title: '修改',
                                area: ['100%', '100%'],
                                maxmin: true,
                                content: '/studentLayer/Student/UpdateStudent?id=' + data.id,
                            })
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                        }

                    });

                } else if (layEvent == 'del') {

                    layer.msg('是否删除', {
                        btn: ['是', '否'],
                        yes: function (index, layero) {
                            $.ajax({
                                dataType: 'json',
                                type: 'GET',
                                url: '/studentLayer/Student/DeleteStudent',
                                data: {"id": data.id},
                                success: function (ajax) {
                                    obj.del();
                                    layer.close(index);
                                }
                            })
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                        }

                    });
                }

            })
        })
    })

    function select() {
        var name = $("select[name=name]>option:selected").text();
        var c_t_name = $("select[name=c_t_name]>option:selected").text();
        console.log(name);
        console.log(c_t_name);
        window.table.reload('table', {
            method:'POST',
            where: {
                name: name,
                c_t_name: c_t_name
            }
        })
    }

    // $(function () {
    //     layui.use(['table'], function () {
    //         var form = layui.form;
    //         student_name(form);
    //         course(form);
    //         $.ajax({
    //             dataType: "json",
    //             url: "/studentLayer/Student/SelectStudent",
    //             method: "POST",
    //             success: function (ajax) {
    //                 var html;
    //                 if (ajax.code == 0) {
    //                     ajax.data.forEach(function (value, index) {
    //                         html = html
    //                             + "<tr>"
    //                             + "<td>" + value.name + "</td>"
    //                             + "<td>" + value.password + "</td>"
    //                             + "<td>" + value.sex + "</td>"
    //                             + "<td>" + value.age + "</td>"
    //                             + "<td>" + value.c_t_name + "</td>"
    //                             + "<td>" + value.cls_name + "</td>"
    //                             + "<td>" + value.create_time + "</td>"
    //                             + "<td>"
    //                             + "<a href='DeleteStudent?id=" + value.id + "'>" + "删除" + "</a>"
    //                             + "&nbsp;&nbsp;"
    //                             + "<a onclick='UPStudent(" + value.id + ");' href='UpdateStudent?id=" + value.id + "'>" + "修改" + "</a>"
    //                             + "</td>"
    //                             + "</tr>";
    //                     })
    //                     $("#selectStudent").html(html);
    //
    //
    //                 } else {
    //                     alert("垃圾");
    //
    //                 }
    //             }
    //         })
    //
    //     })
    // })
    // function UPStudent(id) {
    //     $.ajax({
    //         dataType: "json",
    //         type: "GET",
    //         url: "/studentLayer/Student/UpdateStudent",
    //         data: {"id": id}
    //     })
    //
    // }
    // function select() {
    //     $.ajax({
    //         dataType: "json",
    //         type: "POST",
    //         url: "/studentLayer/Student/SelectStudent",
    //         traditional: true,
    //         data: {
    //             "name": $("select[name=name]>option:checked").text(),
    //             "c_t_name": $("select[name=c_t_name]>option:checked").text()
    //         },
    //         success: function (ajax) {
    //             var html;
    //             if (ajax.code == 0) {
    //                 ajax.data.forEach(function (value, index) {
    //                     html = html
    //                         + "<tr>"
    //                         + "<td>" + value.name + "</td>"
    //                         + "<td>" + value.password + "</td>"
    //                         + "<td>" + value.sex + "</td>"
    //                         + "<td>" + value.age + "</td>"
    //                         + "<td>" + value.c_t_name + "</td>"
    //                         + "<td>" + value.cls_name + "</td>"
    //                         + "<td>" + value.create_time + "</td>"
    //                         + "<td>"
    //                         + "<a href='DeleteStudent?id=" + value.id + "'>" + "删除" + "</a>"
    //                         + "&nbsp;&nbsp;"
    //                         + "<a onclick='UPStudent(" + value.id + ");' href='UpdateStudent?id=" + value.id + "'>" + "修改" + "</a>"
    //                         + "</td>"
    //                         + "</tr>";
    //                 })
    //                 $("#selectStudent").html(html);
    //
    //             } else {
    //                 alert("垃圾");
    //
    //             }
    //         }
    //
    //     })
    // }
</script>


</body>
</html>